<template>
  <div class="page-content">
    <div class="header">
      <h3>基础设置</h3>
    </div>

    <el-form label-width="95px" style="margin-top: 20px">
      <el-form-item label="驾校名称：">
        <el-input v-model="sys.storeName" :disabled="!isEdit" />
      </el-form-item>
      <!-- 驾校LOGO部分 -->
      <el-form-item label="驾校LOGO：" prop="storeLogo">
        <el-input v-model="sys.storeLogo" style="display: none"></el-input>

        <!-- <el-upload class="avatar-uploader" :action="server" :headers="headers" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <el-image v-if="headerPic" :src="headerPic" class="avatar" fit="contain"></el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
              <Plus />
            </el-icon></i>
        </el-upload> -->
        <div class="avatar-uploader" @click="showImageChooseDialog = true">
          <el-image v-if="headerPic" :src="headerPic" class="avatar" fit="contain"></el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
              <Plus />
            </el-icon></i>
          <div v-if="headerPic" class="mask">替换</div>
          <el-icon v-if="headerPic" class="del-image" :size="20" @click.stop="handleDelImg">
            <CircleCloseFilled />
          </el-icon>
        </div>
      </el-form-item>
      <!-- end驾校LOGO部分 -->
      <!-- 所属地区 -->
      <el-form-item label="所属区域" prop="area">
        <el-cascader ref="addressInfo" v-model="sys.area" :options="addressOptions" @change="handleChange"
          :disabled="!isEdit" :props="props">
        </el-cascader>
      </el-form-item>
      <!-- 所属地区 -->
      <el-form-item label="驾校简介：">
        <el-input type="textarea" :rows="6" v-model="sys.storeDesc" :disabled="!isEdit" />
      </el-form-item>
      <el-form-item label="驾校UID：">
        <p>{{ sys.id }}</p>
      </el-form-item>
      <el-form-item label="创建时间：">
        <p>{{ sys.createTime }}</p>
      </el-form-item>
      <el-form-item label="驾校套餐：">
        <p>{{ sys.thaliName }}</p>
      </el-form-item>
      <el-form-item label="到期时间：">
        <p>{{ sys.thaliTime }}</p>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 90px" v-ripple @click="edit">
          {{ isEdit ? '保存' : '编辑' }}
        </el-button>
      </el-form-item>
    </el-form>
    <image-selected-dialog v-if="showImageChooseDialog" :single-type="selectImageSingle"
      :show-image-choose-dialog="showImageChooseDialog" @close-dialog="handleCloseImageDialog"
      :operationType="false"></image-selected-dialog>
  </div>
</template>

<script setup lang="ts">
import type { UploadFile } from 'element-plus'
import { BasicSetting, EditBasicSetting } from '@/api/driverSchoolApi'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
import { ElMessage } from 'element-plus'
import { getAddressInfo } from '@/api/ApiList'
import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'

let server = `${import.meta.env.VITE_API_URL}files`
let { accessToken } = userStore
const headers = { Authorization: 'Bearer ' + accessToken }
const addressOptions = ref([])
const props = ref({ value: 'code', label: 'name', children: 'children' })
const sys = ref({
  storeName: '',
  storeLogo: '',
  provinceCode: '',
  provinceName: '',
  cityCode: '',
  cityName: '',
  areaCode: '',
  thaliId: '',
  areaName: '',
  storeDesc: '',
  id: Number(''),
  createTime: '',
  thaliName: '',
  thaliTime: '',
  userId: '',
  status: '',
  area: [] as string[]
})
const isEdit = ref(false)
const disabled = ref(false)
const addressInfo = ref()
//请求地址级联接口
const getAddressListData = async () => {
  const res = await getAddressInfo()
  if (res.code === '00000') {
    addressOptions.value = res.data
    console.log(addressOptions.value, 'addressOptions.value')
  }
}
const handleChange = (val: any) => {
  console.log(val, 'val====')

  const areaText = addressInfo.value.presentText
  const addressSplit = areaText.split('/')
  sys.value.provinceCode = val[0]
  sys.value.provinceName = addressSplit[0]
  sys.value.cityCode = val[1]
  sys.value.cityName = addressSplit[1]
  sys.value.areaCode = val[2]
  sys.value.areaName = addressSplit[2]
}
const edit = async () => {
  isEdit.value = !isEdit.value
  if (!isEdit.value) {
    sys.value.storeLogo = headerPic.value
    const res = await EditBasicSetting(sys.value.id, {
      storeName: sys.value.storeName,
      storeLogo: sys.value.storeLogo,
      provinceName: sys.value.provinceName,
      cityName: sys.value.cityName,
      areaName: sys.value.areaName,
      storeDesc: sys.value.storeDesc,
      id: sys.value.id,
      createTime: sys.value.createTime,
      thaliName: sys.value.thaliName,
      thaliTime: sys.value.thaliTime,
      userId: sys.value.userId,
      provinceCode: sys.value.provinceCode,
      cityCode: sys.value.cityCode,
      areaCode: sys.value.areaCode,
      status: sys.value.status,
      thaliId: sys.value.thaliId
    })
    if (res.code === '00000') {
      ElMessage.success('编辑成功')
    }
  }
}

const showImageChooseDialog = ref(false)
const selectImageSingle = ref(true)
const handleCloseImageDialog = (value: any) => {
  if (value && value.fileUrl) {
    headerPic.value = value.fileUrl
  }
  showImageChooseDialog.value = false
}

const handleDelImg = () => {
  headerPic.value = ''
}

const getData = async () => {
  const res = await BasicSetting()
  if (res.code === '00000') {
    sys.value = res.data
    console.log(sys.value, 'sys')
    headerPic.value = sys.value.storeLogo
    sys.value.area = [sys.value.provinceCode, sys.value.cityCode, sys.value.areaCode].filter(
      Boolean
    )
    console.log(sys.value.area, 'sys.value===')
  }
}
//主图部分上传
const headerPic = ref('')
const handleAvatarSuccess = (file: any) => {
  headerPic.value = file.data.url
  sys.value.storeLogo = file.data.url
}
//上传限制大小格式等
const beforeAvatarUpload = (file: any) => {
  const isLt2M = file.size / 10240 / 10240 < 2
  if (file.type != 'image/jpeg' && file.type != 'image/png' && file.type != 'image/gif') {
    ElMessage.error('图片类型仅支持JPG/PNG/GIF格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 20MB!!')
    return false
  }
}
onMounted(() => {
  getAddressListData()
  getData()
})
</script>

<style lang="scss" scoped>
.page-content {
  padding: 20px 20px 92px !important;
  width: 100%;
  height: 100%;

  .header {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--art-border-color);

    h3 {
      font-size: 18px;
      // font-weight: 500;
    }
  }

  :deep(.el-form) {
    .el-form-item {
      max-width: 700px;
    }
  }
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;

  .mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-size: 12px;
  }

  .del-image {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #8c939d;
  }

  &:hover .mask {
    opacity: 1;
  }

  &:hover .del-image {
    display: block;
  }
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
